<template>
  <div>
    <vxe-table
      ref="table"
      row-key
      :height="height"
      :data="columns"
      :tooltip-config="{ showAll: true }"
    >
      <vxe-table-column title="排序" width="48" align="center">
        <template>
          <span class="drag-btn">
            <a-icon type="drag" />
          </span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="显示" align="center" width="48">
        <template v-slot="{ row }">
          <a-checkbox
            :checked="row.isShow"
            @change="isShowChange(row, $event)"
          />
        </template>
      </vxe-table-column>

      <vxe-table-column field="isSearch" title="查询" align="center" width="48">
        <template v-slot="{ row }">
          <a-checkbox
            :checked="row.isSearch"
            @change="isSearchChange(row, $event)"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="name"
        title="字段名"
        width="100"
        showOverflow="ellipsis"
      >
        <template v-slot="{ row }">{{ row.name }}</template>
      </vxe-table-column>
      <vxe-table-column
        field="description"
        title="标题"
        align="center"
        width="150"
      >
        <template v-slot="{ row }">
          <a-input placeholder="请输入标题" v-model="row.description" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="对齐" align="center" width="80">
        <template v-slot="{ row }">
          <a-select v-model="row.align" placeholder="请选择对齐方式">
            <a-select-option value="left">左</a-select-option>
            <a-select-option value="center">中</a-select-option>
            <a-select-option value="right">右</a-select-option>
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="width"
        title="宽度(px)"
        align="center"
        width="110"
      >
        <template v-slot="{ row }">
          <a-input-number
            style="width: 80px"
            placeholder="请输入宽度(px)"
            v-model="row.width"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="templet"
        title="格式化"
        align="center"
        width="120"
      >
        <template v-slot="{ row }">
          <a-select
            placeholder="格式化"
            v-model="row.templet"
            style="width: 100px"
          >
            <a-select-option value="HHMMSS">HH:mm:ss</a-select-option>
            <a-select-option value="YYYYMMDD">yyyy-MM-dd</a-select-option>
            <a-select-option value="YYYYMMDDHHMMSS"
              >yyyy-MM-dd HH:mm:ss</a-select-option
            >
            <a-select-option value="Icon">图标</a-select-option>
            <a-select-option value="Sex">性别</a-select-option>
            <a-select-option value="Freeze">禁用</a-select-option>
            <a-select-option value="YesOrNo">是否</a-select-option>
            <a-select-option value="Delete">删除</a-select-option>
            <a-select-option value="WorkFlowStatus">流程状态</a-select-option>
            <a-select-option value="Image">图片</a-select-option>
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column field="fixed" title="固定" align="center" width="96">
        <template v-slot="{ row }">
          <a-select placeholder="固定" v-model="row.fixed" style="width: 80px">
            <a-select-option value="left">左</a-select-option>
            <a-select-option value="right">右</a-select-option>
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column title="排序" align="center" width="210">
        <template v-slot="{ row }">
          <a-checkbox :checked="row.isSort" @change="isSortChange(row, $event)"
            >排序</a-checkbox
          >
          <a-checkbox
            :checked="row.isSortDefalut"
            @change="isSortDefalutChange(row, $event)"
            >默认</a-checkbox
          >
          <a-checkbox
            :checked="row.isSortAsc"
            @change="isSortAscChange(row, $event)"
            >Asc</a-checkbox
          >
        </template>
      </vxe-table-column>
      <vxe-table-column field="isTotal" title="合计" align="center" width="48">
        <template v-slot="{ row }">
          <a-checkbox
            :checked="row.isTotal"
            @change="isTotalChange(row, $event)"
          ></a-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column title="子表" align="center" min-width="240px">
        <template v-slot="{ row }">
          <a-input-group compact>
            <a-select
              placeholder="请选择子表"
              v-model="row.subtable.id"
              mode="multiple"
              style="width: calc(100% - 60px)"
            >
              <a-select-option
                v-for="(item, i) in row.subtable.all"
                :key="i"
                :value="item.configId"
                >{{ item.name }}</a-select-option
              >
            </a-select>

            <a-badge dot v-if="row.subtable.config.condition">
              <a-button @click="subtableClick(row)">
                <a-icon type="search"></a-icon>
              </a-button>
            </a-badge>

            <a-button v-else @click="subtableClick(row)">
              <a-icon type="search"></a-icon>
            </a-button>
          </a-input-group>
        </template>
      </vxe-table-column>
      <vxe-table-column title="弹出" align="center" width="160">
        <template v-slot="{ row }">
          <a-input-group compact>
            <a-select
              placeholder="请选择弹出"
              v-model="row.dialog.id"
              style="width: 90px"
            >
              <a-select-option
                v-for="(item, i) in row.subtable.all"
                :key="i"
                :value="item.configId"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <a-badge dot v-if="row.dialog.config.condition">
              <a-button @click="dialogClick(row)">
                <a-icon type="setting" />
              </a-button>
            </a-badge>
            <a-button v-else @click="dialogClick(row)">
              <a-icon type="setting" />
            </a-button>
          </a-input-group>
        </template>
      </vxe-table-column>
      <vxe-table-column title="多表头名称" align="center" width="120">
        <template v-slot="{ row }">
          <a-input placeholder="请输入标题" v-model="row.header.title" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="多表头字段" align="center" width="150">
        <template v-slot="{ row }">
          <a-select
            placeholder="请选择多表头字段"
            v-model="row.header.field"
            mode="multiple"
            style="width: 130px"
          >
            <a-select-option
              v-for="(item, i) in row.controls"
              :key="i"
              :value="item.model"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column fixed="right" title="样式" align="center" width="48">
        <template v-slot="{ row }">
          <a-badge
            :count="row.style.length"
            v-if="
              row.style !== undefined &&
              row.style !== null &&
              row.style.length > 0
            "
          >
            <a-button size="small" @click="styleClick(row)" type="primary">
              <a-icon type="bg-colors" />
            </a-button>
          </a-badge>

          <a-button size="small" v-else @click="styleClick(row)" type="primary">
            <a-icon type="bg-colors" />
          </a-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <list-subtable
      v-if="drawer.subtable.visible"
      :visible.sync="drawer.subtable.visible"
      :config="drawer.subtable.config"
      ref="listSubtable"
      @ok="subtableOk"
    />
    <list-dialog
      v-if="drawer.dialog.visible"
      :visible.sync="drawer.dialog.visible"
      :config="drawer.dialog.config"
      ref="listDialog"
      @ok="dialogOk"
    />

    <list-style
      v-if="drawer.style.visible"
      :visible.sync="drawer.style.visible"
      :config="drawer.style.config"
      ref="listStyle"
      @ok="styleOk"
    />
  </div>
</template>
    
    <script>
import listSubtable from "@/pages/system/agile/common/list/subtable";
import listDialog from "@/pages/system/agile/common/list/dialog";
import listStyle from "@/pages/system/agile/common/list/style";
import Sortable from "sortablejs";
export default {
  name: "filter-index",
  components: { listSubtable, listDialog, listStyle },
  data() {
    return {
      height: window.innerHeight - 66,
      drawer: {
        visible: this.visible,
        subtable: {
          visible: false,
          zIndex: 9999,
          config: {},
        },

        dialog: {
          visible: false,
          zIndex: 1040,
          config: {},
        },

        style: {
          visible: false,
          config: {},
        },
      },

      controls: [],
    };
  },

  props: {
    configId: {
      type: String,
    },
    columns: {
      type: Array,
    },
  },

  mounted() {
    this.rowDrop();
  },

  methods: {
    /**
     * 子表规则点击
     */
    subtableClick(item) {
      this.drawer.subtable.visible = true;
      this.drawer.subtable.config = item;
      this.editRow = item;
    },

    /**
     * 子表规则保存
     */
    subtableOk(config) {
      this.editRow.subtable.config = config;
    },

    /**
     * 弹出框点击
     */
    dialogClick(item) {
      this.drawer.dialog.visible = true;
      this.drawer.dialog.config = item;
      this.editRow = item;
    },

    /**
     * 弹出框规则保存
     */
    dialogOk(config) {
      this.editRow.dialog.config = config;
    },

    /**
     * 弹出框点击
     */
    styleClick(item) {
      this.drawer.style.visible = true;
      this.drawer.style.config = item;
      this.editRow = item;
    },

    /**
     * 弹出框规则保存
     */
    styleOk(config) {
      this.editRow.style = config;
    },

    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      const xTable = this.$refs.table;
      this.sortable1 = Sortable.create(
        xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
        {
          handle: ".drag-btn",
          onEnd: ({ newIndex, oldIndex }) => {
            const currRow = that.columns.splice(oldIndex, 1)[0];
            that.columns.splice(newIndex, 0, currRow);
          },
        }
      );
    },
    /**
     * 删除
     */
    del(row) {
      let spIndex = -1;
      this.columns.forEach((item, index) => {
        if (item._XID == row._XID) {
          spIndex = index;
        }
      });
      if (spIndex != -1) {
        this.columns.splice(spIndex, 1);
      }
    },

    /**
     *显示改变
     */
    isShowChange(item, e) {
      item.isShow = e.target.checked;
    },

    /**
     *查询改变
     */
    isSearchChange(item, e) {
      item.isSearch = e.target.checked;
    },

    /**
     *排序改变
     */
    isSortChange(item, e) {
      item.isSort = e.target.checked;
    },

    /**
     *默认改变
     */
    isSortDefalutChange(item, e) {
      item.isSortDefalut = e.target.checked;
    },

    /**
     *Asc改变
     */
    isSortAscChange(item, e) {
      item.isSortAsc = e.target.checked;
    },

    /**
     *合计改变
     */
    isTotalChange(item, e) {
      item.isTotal = e.target.checked;
    },
  },
};
</script>
    
    <style lang="less" scoped>
.drag-btn {
  cursor: move;
}
</style>
    